view,scroll-view {
	box-sizing: border-box;
}

.dl-full {
	width: 100%;
}


.dl-grid {
	align-content: start;
	align-items: start;
	justify-content: initial;
	grid-template-columns: repeat(12, 1fr);
	width: 100%;
	display: grid;
	container-type: inline-size;
		
	&.center {
		place-content: center;
		place-items: center;
	}
	&.block-center {
		align-content: center;
		align-items: center;
	}
	&.inline-center {
		justify-content: center;
		justify-items: center;
	}

	&.block-start {
		align-content: start;
		margin-block-end: auto;
	}
	&.inline-start {
		justify-content: start;
	}

	&.block-end {
		align-content: end;
		margin-block-start: auto !important;
	}

	&.inline-end {
		justify-content: end;
	}

	&.block-stretch {
		align-content: stretch;
		align-items: stretch;
	}
	&.inline-stretch {
		justify-content: stretch;
		justify-items: stretch;
	}
	&.stretch {
		place-content: stretch;
		place-items: stretch stretch;
	}
}

.cols-auto {
	grid-auto-flow: column;
	grid-template-columns: initial;
}
.dl-flex {
	display: flex;
	align-items: center;
	box-sizing: border-box;

	& .flex{
		flex:1;
	}
	& .left {
		margin-right: auto;
		margin-left: 0;
	}
	& .right {
		margin-left: auto;
		margin-right: 0;
	}
	&.wrap{
		flex-wrap: wrap;
	}
	&.column {
		flex-flow: column;
	}
	&.start {
		justify-content: flex-start;
	}
	&.end {
		justify-content: flex-end;
	}
	&.center {
		justify-content: center;
	}
	&.evenly {
		justify-content: space-evenly;
	}
	&.around {
		justify-content: space-around;
	}
	&.between {
		justify-content: space-between;
	}
	&.cross-start {
		align-items: flex-start;
	}
	&.cross-end {
		align-items: flex-end;
	}
	&.cross-center {
		align-items: center;
	}
	&.cross-stretch {
		align-items: stretch;
	}
}

@for $i from 1 through 12 {
	.cc-#{$i} {
		grid-template-columns: repeat(#{$i}, 1fr);
	}

	.cols-#{$i} > view {
		grid-column: span #{$i}/ span #{$i};
	}
	.col-#{$i} {
		grid-column: span #{$i}/ span #{$i};
	}

	.g-#{$i} {
		gap: #{$i * 4}rpx;
	}
	.p-#{$i} {
		padding: #{$i * 4}rpx;
	}
	.p-x-#{$i} {
		padding: 0 #{$i * 4}rpx;
	}
	.p-y-#{$i} {
		padding: #{$i * 4}rpx 0;
	}
	.p-t-#{$i} {
		padding-top: #{$i * 4}rpx;
	}
	.p-r-#{$i} {
		padding-right: #{$i * 4}rpx;
	}
	.p-b-#{$i} {
		padding-bottom: #{$i * 4}rpx;
	}
	.p-l-#{$i} {
		padding-left: #{$i * 4}rpx;
	}

	.m-#{$i} {
		margin: #{$i * 4}rpx;
	}
	.m-x-#{$i} {
		margin: 0 #{$i * 4}rpx;
	}
	.m-y-#{$i} {
		margin: #{$i * 4}rpx 0;
	}
	.m-t-#{$i} {
		margin-top: #{$i * 4}rpx;
	}
	.m-r-#{$i} {
		margin-right: #{$i * 4}rpx;
	}
	.m-b-#{$i} {
		margin-bottom: #{$i * 4}rpx;
	}
	.m-l-#{$i} {
		margin-left: #{$i * 4}rpx;
	}
}

@for $i from 1 through 13 {
	.cs-#{$i} {
		grid-column-start: #{$i};
	}
	.ce-#{$i} {
		grid-column-end: #{$i};
	}
}

